<template>
  <div v-if="!getIsPhone" class="account-update">
    <account-header></account-header>
    <div class="main-wrapper">
      <div class="main box-shadow">
        <account-tab 
          :activeIndex="activeIndex"
          :tabs="switchName"
          @click="updateActiveIndex"
        ></account-tab>
        <div class="pickers border-bottom">
          <lottery-names></lottery-names>
          <dropdown-picker 
            class="dropdown-picker-adjust"
            @click="unfoldIncomeTypes"
            @close="foldIncomeTypes"
            :selectedContent="accountChangeSubType"
            :showSelections="showAccountChangeTypes"
          >
            <!-- <template v-slot:title>
              {{accountChangeSubType}}
            </template>
            <template v-slot:icon
              <span class="icon hover-style">
                <i 
                  class="iconfont" 
                  @click="unfoldDropdown"
                  :class="showDropdown ? 'active' : ''"
                ></i>
              </span>
            </template>
            <template v-slot:content> -->
            <dropdown-content @click="updateAccountChangeType"></dropdown-content>
            <!-- </template> -->
          </dropdown-picker>
          <dropdown-picker 
            class="dropdown-picker-adjust"
            iconClass="iconsx_riqi"
            @click="unfoldTimepicker"
            @close="foldTimepicker"
            :showSelections="showTimePicker"
            :selectedContent="selectedTime"
            >
            今天
          </dropdown-picker>
          <recent-days @click="updateRecentIndex" :activeRecentIndex="activeRecentIndex"></recent-days>
          <div class="search-wrapper">
            <input-search @click="updateSearchContent"></input-search>
          </div>
        </div>
        <component :is="currentComponent" :type="accountChangeMainType" :sub-type="accountChangeSubType"></component>
      </div>
    </div>
  </div>
  <div v-else class="account-update">
    <header-template-phone>
      <template v-slot:center>
        账变
      </template>
      <template v-slot:right>
        <input-search></input-search>
      </template>
    </header-template-phone>
    <records-selector 
      @show-picker="slideUpTimePicker"
      @update-index="updateActiveIndex"
      @update-time="updateSelectedTime"
      :switchName="switchName"
      :activeIndex="activeIndex"
      :showPicker="false"
    >
    </records-selector>
    <div class="main">
      <selected-time :time="selectedTime"></selected-time>
      <div class="component-wrapper">
        <component :is="currentComponent"></component>
      </div>
    </div>
  </div>
</template>

<script>
import AccountHeader from '@/components/header/account-header/account-header'
import AccountTab from '@/pages/my-account/components/account-tab'
import DropdownPicker from '@/components/base/dropdown-picker/dropdown-picker'
import RecentDays from '@/pages/my-account/components/recent-days'
import LotteryNames from '@/components/base/lottery-names/lottery-names'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import InputSearch from '@/components/input-search/input-search'
import RecordsSelector from '@/components/records-selector/records-selector'
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpButtons from '@/components/slide-up-buttons/slide-up-buttons'
import AccountChangeDetail from './components/account-change-detail' 
import GroupRechargeWithdraw from './components/group-recharge-withdraw' 
import BcChart from '@/components/bc-chart/bc-chart'
import SelectedTime from '@/components/base/selected-time/selected-time'
import DropdownContent from './components/dropdown-content'


import { mapGetters } from 'vuex';
 
export default {
  components: {
    AccountHeader,
    AccountTab,
    DropdownPicker,
    InputSearch,
    RecentDays,
    LotteryNames,
    HeaderTemplatePhone,
    HeaderBack,
    RecordsSelector,
    BcModal,
    SlideUpButtons, 
    BcChart,
    AccountChangeDetail,
    SelectedTime,
    GroupRechargeWithdraw,
    DropdownContent 
  },
  data() {
    return {
      switchName: [
        {name: '账变明细'},
        {name: '团队充值'},
      ],
      // 账变明细/团队充值
      activeIndex: 0,
      showTimePicker: false,
      activeRecentIndex: 0,
      showAccountChangeTypes: false,
      accountChangeSubType: '所有类型',
      accountChangeMainType: 'all',
      selectedTime: '今天',
      searchContent: ''
    }
  },
  methods: {
    slideUpTimePicker() {
      this.showTimePicker = true
    },
    // 收入支出选项
    unfoldIncomeTypes() {
      this.showAccountChangeTypes = true
    },
    // 收起收入支出选项
    foldIncomeTypes() {
      this.showAccountChangeTypes = false 
    },
    updateAccountChangeType(val, type) {
      this.accountChangeSubType = val.value
      this.accountChangeMainType = type
      this.showAccountChangeTypes = false 
    },
    unfoldTimepicker() {
      this.showTimePicker = true 
    },
    foldTimepicker() {
      this.showTimePicker = false 
    },
    updateActiveIndex(index) {
      this.activeIndex = index 
    },
    updateRecentIndex(index) {
      this.activeRecentIndex = index
    },
    updateSearchContent(value) {
      this.searchContent = value 
      console.log(this.searchContent)
    },
    
    
    updateSelectedTime(time) {
      this.selectedTime = time
    },
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    currentComponent() {
      return this.activeIndex == 0 ? 'AccountChangeDetail' : 'GroupRechargeWithdraw'
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    .main-wrapper 
      box-sizing border-box 
      padding-top 128px
      .main 
        width 1200px 
        margin 0 auto
        box-sizing border-box 
        padding-top 10px
        .pickers 
          display flex
          align-items center
          box-sizing border-box 
          padding 10px 20px 0 20px
          background #fff
          .iconfont 
            font-size 14px
            &.active 
              color $color-theme-red !important 
          .tab-switch 
            margin-right 20px
          .dropdown-picker 
            margin-right 10px
          .dropdown-picker-adjust 
            margin-right 10px
          .search-wrapper 
            flex 1
            display flex 
            justify-content flex-end
          .search-wrapper >>> .dropdown-picker 
            width 190px 
            margin-right 0
            .lottery-name 
              width 155px 
              input 
                width 155px 
                box-sizing border-box 
                padding-left 10px 
                outline none
                background none
  @media screen and (max-width 750px) 
    .main
      box-sizing border-box 
      padding 0 10px
      padding-top 88px 
      padding-bottom 48px
      .time-selected 
        height 24px
        line-height 24px
        text-align center
        color $color-sub-grey
        display flex 
        align-items center
        justify-content space-between
        margin-bottom 5px
        .line 
          height 1px 
          flex 1
          border-top 1px dashed #cccdd0
        .context 
          margin 0 10px
     
</style>